<template>
  <div>
    <div class="header5">
      <span class="iconfont icon-xiaoyuhao" @click="back"></span>
      <div class="zhuangxiu">装修</div>
      <p class="h8">VR看装修</p>
      <span class="iconfont icon-xinxi"></span>
    </div>
    <div class="sc">
      <van-search v-model="value" placeholder="请输入搜索关键词" />
      <div class="swaper">
        <ul>
          <li>
            <span class="iconfont icon-zhinenggujia"></span>
            <span>估价</span>
          </li>
          <li>
            <span class="iconfont icon-anliku"></span>
            <span>案例</span>
          </li>
          <li>
            <span class="iconfont icon-taocan"></span>
            <span>爆款套餐</span>
          </li>
          <li>
            <span class="iconfont icon-zhuangxiu"></span>
            <span>找装修</span>
          </li>
          <li>
            <span class="iconfont icon-jiancai"></span>
            <span>选建材</span>
          </li>
          <li>
            <span class="iconfont icon-zhuangxiu"></span>
            <span>模拟装修</span>
          </li>
          <li>
            <span class="iconfont icon-xinshouzhinan"></span>
            <span>新手指南</span>
          </li>
        </ul>
      </div>
      <div class="need">
        <div class="left">
          <div class="shang">
            <span class="iconfont icon-watchRoom"></span>
            <!-- <span class="iconfont icon-duihao"></span>
        <span class="iconfont icon-duihao"></span> -->
            <p class="s1">填写装修需求，立享服务</p>
          </div>
          <div class="zhong">
            <span class="iconfont icon-duihao"></span>
            <p class="s2">免费估价</p>
            <p class="s3">合理分配预算</p>
          </div>
          <div class="zhong">
            <span class="iconfont icon-duihao"></span>
            <p class="s2">免费设计</p>
            <p class="s3">送户型规划图和装修效果图</p>
          </div>
        </div>
        <div class="right">
          <p class="r1">立即填写</p>
        </div>
      </div>
      <div class="service">
        <div class="left">
          <p class="a1">装修服务 ></p>
          <p class="a2">装修公司推荐</p>
          <div class="img">
            <img src="../assets/img/14.png" alt="" />
            <img src="../assets/img/15.png" alt="" />
          </div>
        </div>
        <div class="center">
          <p class="a1">品牌建材 ></p>
          <p class="a2">大牌天天有...</p>
          <div class="img">
            <img src="../assets/img/16.png" alt="" />
            <img src="../assets/img/17.png" alt="" />
          </div>
        </div>
        <div class="righta">
          <p class="a1">模拟装修 ></p>
          <p class="a2">一分钟看见...</p>
          <div class="img">
            <img src="../assets/img/18.png" alt="" />
            <img src="../assets/img/19.png" alt="" />
          </div>
        </div>
      </div>
      <zhuangbanner />
      <tab />
    </div>
  </div>
</template>



<script>
import zhuangbanner from "./zhuangBanner.vue";
import tab from "./tab.vue";
export default {
  name: "zhuangxiu",
  data() {
    return {
      value: "",
    };
  },
  components: {
    zhuangbanner,
    tab,
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
  },
};
</script>


<style scoped>
.header5 {
  display: flex;
  margin-left: 0.1rem;
  height: 0.4rem;
  line-height: 0.5rem;
  /* margin-bottom: .2rem; */
}
.header5 .icon-xiaoyuhao {
  font-size: 0.24rem;
  font-weight: 700;
}
.header5 .zhuangxiu {
  font-size: 0.24rem;
  font-weight: 700;
  color: #0a0c11;
  margin-left: 0.2rem;
}
.header5 .h8 {
  font-size: 0.24rem;
  color: #51b795;
  margin-left: 1.1rem;
  font-weight: 700;
}
.header5 .icon-xinxi {
  font-size: 0.24rem;
  margin-left: 0.2rem;
  font-weight: 700;
}
.sc {
  display: flex;
  flex: 1;
  overflow: auto;
  flex-direction: column;
  /* margin-top: 0.4rem; */
}
.swaper ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  height: 1rem;
  overflow-x: auto;
}
.swaper li {
  width: 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  /* padding-top: .2rem; */
}
.swaper li span {
  margin-top: 0.1rem;
}
.icon-zhinenggujia,
.icon-taocan,
.icon-zhuangxiu {
  color: #ffac38;
  font-size: 0.24rem;
}
.icon-anliku,
.icon-jiancai,
.icon-xinshouzhinan {
  color: #4f80e8;
  font-size: 0.24rem;
}
.need {
  width: 93%;
  height: 1.3rem;
  border: 1px solid #ebebeb;
  margin-left: 0.1rem;
  margin-top: 0.1rem;
  display: flex;
}
.shang {
  display: flex;
  margin-top: 0.1rem;
}
.shang .s1 {
  font-size: 0.2rem;
  color: #0e0e0e;
  margin-left: 0.1rem;
  font-weight: 700;
}
.icon-watchRoom {
  font-size: 0.28rem;
}
.zhong {
  display: flex;
  margin-top: 0.2rem;
}
.icon-duihao {
  color: #24cb93;
  font-size: 0.24rem;
  margin-left: 0.02rem;
  margin-right: 0.05rem;
}
.zhong .s2 {
  font-size: 0.18rem;
  color: #0e0e0e;
  font-weight: 700;
  /* margin-left: .2rem; */
}
.zhong .s3 {
  font-size: 0.14rem;
  margin-left: 0.05rem;
  /* width: ; */
}
.right {
  width: 0.6rem;
  height: 0.4rem;
  background-color: #1eca90;
  margin-top: 0.5rem;
  margin-right: 0.1rem;
  line-height: 0.4rem;
  text-align: center;
}
.right .r1 {
  font-size: 0.14rem;
  color: #fff;
}
.service {
  display: flex;
  justify-content: space-between;
  margin-top: 0.15rem;
  overflow: hidden;
  width: 100%;
}
.service .left {
  width: 28%;
  height: 1rem;
  background-color: #eff8ff;
  /* background-color: red; */
  margin-left: 0.1rem;
}
.service .center {
  width: 28%;
  height: 1rem;
  background-color: #eff8ff;
  /* background-color: red; */
}
.service .righta {
  width: 28%;
  height: 1rem;
  background-color: #fff4f0;
  margin-bottom: 0.2rem;
}
.service .left .a1 {
  margin-top: 0.1rem;
  font-size: 0.14rem;
  font-weight: 700;
  margin-left: 0.16rem;
}
.service .left .a2 {
  text-align: center;
  font-size: 0.14rem;
  margin-top: 0.05rem;
}
.service .img {
  display: flex;
  justify-content: space-around;
  margin-top: 0.1rem;
}
.service .img img {
  width: 40%;
}
.service .center .a1 {
  margin-top: 0.1rem;
  font-size: 0.14rem;
  font-weight: 700;
  margin-left: 0.16rem;
}
.service .center .a2 {
  text-align: center;
  font-size: 0.14rem;
  margin-top: 0.05rem;
}
.service .righta .a1 {
  margin-top: 0.1rem;
  font-size: 0.14rem;
  font-weight: 700;
  margin-left: 0.16rem;
}
.service .righta .a2 {
  text-align: center;
  font-size: 0.14rem;
  margin-top: 0.05rem;
}
</style>